<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./Plantilla.xhtml">

         
           

         

            <ui:define name="content">
                <h:form>
                    <p:panel header="Titular de la Tarjeta">
                    <h:panelGrid columns="4">
                        <h:outputLabel value="Apellido(s):"/>
                        <p:inputText />
                         <h:outputLabel value="Nombre Completo:"/>
                         <p:inputText />
                            <h:outputLabel value="Identificacion:"/>
                         <p:inputText />
                            <h:outputLabel value="Correo Electronico:"/>
                         <p:inputText />
                            <h:outputLabel value="Telefono:"/>
                         <p:inputText />
                    </h:panelGrid>
                        </p:panel>
                    <p:separator/>
                    <p:panel header="Tarjeta de Credito">
                        <h:panelGrid columns="4">
                         <h:outputLabel value="Franquicia"/>
                         <p:selectOneMenu>
                             <f:selectItem itemLabel="MasterCard" itemValue="MasterCard"/>
                             <f:selectItem itemLabel="Visa" itemValue="Visa"/>
                             <f:selectItem itemLabel="Dinners" itemValue="Dinners"/>
                             <f:selectItem itemLabel="American" itemValue="American"/>
                         </p:selectOneMenu>
                               <h:outputLabel value="Numero de cuotas"/>
                         <p:selectOneMenu>
                             <f:selectItem itemLabel="01" itemValue="1"/>
                             <f:selectItem itemLabel="02" itemValue="2"/>
                             <f:selectItem itemLabel="03" itemValue="3"/>
                             <f:selectItem itemLabel="04" itemValue="4"/>
                         </p:selectOneMenu>
                          <h:outputLabel value="Numero de Tarjeta de Credito:"/>
                          <p:inputText/>                  
                        </h:panelGrid>                    
                    
                        <p:separator/>
                        <h:panelGrid columns="3">                        
                      <h:outputLabel value="Digitos de seguridad al reverso de la tarjeta de credito:"/>
                      <h:outputLabel value=""/>
                      <h:outputLabel value=""/>
                      <p:inputText/>
                          <h:graphicImage library="img" name="tarjeta.png" />
                          <h:outputLabel value="Ultimos tres digitos de la tarjeta"/>
                    </h:panelGrid>
                    </p:panel>
                    <h:commandButton value="Pagar"/>   
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
